import {
  Box,
  HStack,
  IconButton,
  Text,
  Tooltip,
  useClipboard,
  useToast,
} from '@chakra-ui/react';
import IAIIconButton from 'common/components/IAIIconButton';
import { useTranslation } from 'react-i18next';
import { FaQuoteRight } from 'react-icons/fa';
import { RiFileCopy2Line } from 'react-icons/ri';

import {
  setNegativePrompt,
  setPositivePrompt,
} from 'features/parameters/store/generationSlice';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

import { SelectedTagType } from './TagItem';
function Prompt() {
  const { promptTags, negativePromptTags } = useAppSelector(
    (store) => store.tag
  );
  const dispatch = useAppDispatch();
  const buildPromptString = (tags: SelectedTagType[]) =>
    tags
      .map((pt) => {
        if (pt.weight !== 0) {
          return (
            pt.key +
            new Array(Math.abs(pt.weight))
              .fill(pt.weight > 0 ? '+' : '-')
              .join('')
          );
        }
        return pt.key;
      })
      .join();

  const promptStr = buildPromptString(promptTags);

  const _negativePromptStr = buildPromptString(negativePromptTags);

  const negativePromptStr = _negativePromptStr
    ? `,[${_negativePromptStr}]`
    : '';
  const prompt = `${promptStr}${negativePromptStr}`;

  const { onCopy: onPromptCopy, hasCopied: promptHasCopied } = useClipboard(
    prompt || ''
  );

  const { t } = useTranslation();
  // const prompt_bg = useColorModeValue(
  //   'var(--background-color-secondary)',
  //   'gray.900'
  // );
  const toast = useToast();
  const handleClickUsePrompt = () => {
    promptStr && dispatch(setPositivePrompt(promptStr));
    _negativePromptStr
      ? dispatch(setNegativePrompt(_negativePromptStr.slice(1)))
      : dispatch(setNegativePrompt(''));

    toast({
      title: t('toast.promptSet'),
      status: 'success',
      duration: 2500,
      isClosable: true,
    });
  };
  return (
    <Box>
      <Text h="1.5rem" fontWeight="600">
        prompt:
      </Text>
      <Box
        px="3"
        py="2"
        borderRadius="base"
        bg="base.950"
        _dark={{ bg: 'base.900' }}
      >
        <Box h="10rem" overflowY="scroll">
          <Text
            fontSize="sm"
            color="gray.600"
            _dark={{
              color: 'gray.400',
            }}
          >
            {prompt}
          </Text>
        </Box>

        <HStack
          spacing={1}
          display="flex"
          justify="flex-end"
          alignItems="center"
          h="2rem"
        >
          {promptHasCopied ? (
            <p>Copied!</p>
          ) : (
            <Tooltip label={t('profile.copyPrompt')} hasArrow placement="top">
              <IconButton
                color="gary.700"
                aria-label=""
                icon={<RiFileCopy2Line />}
                size="xs"
                onClick={onPromptCopy}
                fontSize={20}
              />
            </Tooltip>
          )}
          <IAIIconButton
            icon={<FaQuoteRight />}
            tooltip={`${t('parameters.usePrompt')}`}
            aria-label={`${t('parameters.usePrompt')}`}
            isDisabled={!prompt}
            onClick={handleClickUsePrompt}
          />
        </HStack>
      </Box>
    </Box>
  );
}

export default Prompt;
